---
section: Box Alignment
title: Align Self
slug: /docs/align-self/
---

# Align Self

Utilities for controlling how an individual flex or grid item is positioned along its container's cross axis.

<carbon-ad />

| React props           | CSS Properties           |
| --------------------- | ------------------------ |
| `alignSelf={keyword}` | `align-self: {keyword};` |

## Auto

Use `alignSelf="auto"` to align an item based on the value of the container's `align-items` property:

```jsx preview color=emerald
<>
  <template preview>
    <x.div h={24} display="flex" alignItems="stretch" spaceX={2}>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="emerald-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        alignSelf="auto"
        flex="1 1 0"
        borderRadius="md"
        bg="emerald-600"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="emerald-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="stretch">
    <div>1</div>
    <x.div alignSelf="auto">2</x.div>
    <div>3</div>
  </x.div>
</>
```

## Start

Use `alignSelf="flex-start"` to align an item to the start of the container's cross axis, despite the container's `align-items` value:

```jsx preview color=amber
<>
  <template preview>
    <x.div h={24} display="flex" alignItems="stretch" spaceX={2}>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="amber-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        alignSelf="start"
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="amber-600"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="amber-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="stretch">
    <div>1</div>
    <x.div alignSelf="flex-start">2</x.div>
    <div>3</div>
  </x.div>
</>
```

## Center

Use `alignSelf="center"` to align an item along the center of the container's cross axis, despite the container's `align-items` value:

```jsx preview color=light-blue
<>
  <template preview>
    <x.div h={24} display="flex" alignItems="stretch" spaceX={2}>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="light-blue-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        alignSelf="center"
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="light-blue-600"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="light-blue-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="stretch">
    <div>1</div>
    <x.div alignSelf="center">2</x.div>
    <div>3</div>
  </x.div>
</>
```

## End

Use `alignSelf="flex-end"` to align an item to the end of the container's cross axis, despite the container's `align-items` value:

```jsx preview color=red
<>
  <template preview>
    <x.div h={24} display="flex" alignItems="stretch" spaceX={2}>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="red-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        alignSelf="flex-end"
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="red-600"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        flex="1 1 0"
        borderRadius="md"
        bg="red-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="stretch">
    <div>1</div>
    <x.div alignSelf="flex-end">2</x.div>
    <div>3</div>
  </x.div>
</>
```

## Stretch

Use `alignSelf="stretch"` to stretch an item to fill the container's cross axis, despite the container's `align-items` value:

```jsx preview color=fuchsia
<>
  <template preview>
    <x.div h={24} display="flex" alignItems="flex-start" spaceX={2}>
      <x.div
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="fuchsia-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        1
      </x.div>
      <x.div
        alignSelf="stretch"
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="fuchsia-600"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        2
      </x.div>
      <x.div
        py={3}
        flex="1 1 0"
        borderRadius="md"
        bg="fuchsia-400"
        color="white"
        display="flex"
        alignItems="center"
        justifyContent="center"
        fontSize="2xl"
        fontWeight="extrabold"
      >
        3
      </x.div>
    </x.div>
  </template>
  <x.div display="flex" alignItems="flex-start">
    <div>1</div>
    <x.div alignSelf="stretch">2</x.div>
    <div>3</div>
  </x.div>
</>
```

## Responsive

To control the alignment of flex items at a specific breakpoint, use responsive object notation. For example, adding the property `alignSelf={{ md: "center" }}` to an element would apply the `alignSelf="center` utility at medium screen sizes and above.

```jsx
<x.div display="grid" alignSelf={{ md: 'center' }}>
  {/* ... */}
</x.div>
```

For more information about xstyled's responsive design features, check out [Responsive Design](/docs/responsive-design/) documentation.
